<template>
  <div style="height: 1.4rem;">
    <div class="big_btn_box">
      <div class="btn_box" @click="$emit('clickBtn')">
        <button class="btn"  :class="{on:isOn}">{{ btnText }} <slot></slot></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['btnText','isOn'],
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.big_btn_box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: .4rem;
  display: flex;
  justify-content: center;

  .btn_box {
    width: 100%;
    max-width: 8.5rem;
    padding: 0 .32rem;
    border-radius: .8rem;
    .btn{
      height: .96rem;
      background: #ebebeb;
      border-radius: .2rem;
      color: #BDBDBD;
      font-weight: 500;
      font-size: .32rem;
      width: 100%;
      border: 0;
    }
    .on{
      background: var(--CObackgroundLinear2);
      color: #fff;
    }
  }
}
</style>